<style scoped>
@import '~@/assets/css/index.css';
@import '~@/assets/css/styles.css';
</style>

<template>
  <div v-loading="pageLoading">
    <div id="layoutSidenav">

      <div id="layoutSidenav_content">
        <main>
          <div class="container-fluid px-4">
            <ol class="breadcrumb mb-4">
              <li class="breadcrumb-item active"></li>
            </ol>
            <div class="row">
              <div class="col-xl-2 col-md-6">
                <div class="card bg-primary text-white mb-4">
                  <div class="card-body">招聘数据总数量</div>
                  <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">{{ homeData.jobTotal }}个</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
              <div class="col-xl-2 col-md-6">
                <div class="card bg-warning text-white mb-4">
                  <div class="card-body">招聘企业数量</div>
                  <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">{{ homeData.companyTotal }}个</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
              <div class="col-xl-2 col-md-6">
                <div class="card bg-success text-white mb-4">
                  <div class="card-body">平均薪资最高省份</div>
                  <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">{{ homeData.maxSalaryCity }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
              <div class="col-xl-2 col-md-6">
                <div class="card bg-danger text-white mb-4">
                  <div class="card-body">学历要求最高职位</div>
                  <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">{{ homeData.maxDegreePostion }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
              <div class="col-xl-2 col-md-6">
                <div class="card bg-info text-white mb-4">
                  <div class="card-body">经验要求最高行业</div>
                  <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">{{ homeData.maxExpPostion }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
              <div class="col-xl-2 col-md-6">
                <div class="card bg-dark text-white mb-4">
                  <div class="card-body">最高薪资职位</div>
                  <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">{{ homeData.maxSalaryPostion }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xl-6">
                <el-card class="card mb-4" shadow="hover">
                  <div slot="header" class="clearfix">
                    <i><svg t="1709283791403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4379" width="32" height="32"><path d="M469.333333 213.333333v85.333334c-119.466667 12.8-213.333333 110.933333-213.333333 234.666666 0 128 106.666667 234.666667 234.666667 234.666667 123.733333 0 221.866667-93.866667 234.666666-213.333333h85.333334c-12.8 166.4-149.333333 298.666667-320 298.666666C315.733333 853.333333 170.666667 708.266667 170.666667 533.333333c0-170.666667 132.266667-307.2 298.666666-320z m384 298.666667h-341.333333V170.666667c187.733333 0 341.333333 153.6 341.333333 341.333333z m-256-243.2V426.666667h157.866667c-12.8-42.666667-106.666667-145.066667-157.866667-157.866667z" fill="#8a8a8a" p-id="4380"></path></svg></i>
                    <span>招聘行业分析饼状图</span>
                  </div>
                  <div class="card-body">
                    <div id="PieChart" style="width: 100%;height: 400px"></div>
                  </div>
                </el-card>
              </div>
              <div class="col-xl-6">
                <el-card class="card mb-4" shadow="hover">
                  <div slot="header" class="clearfix">
                    <i><svg t="1709284015025" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12721" width="30" height="30"><path d="M298.666667 640v170.666667H213.333333v-170.666667h85.333334z m170.666666-170.666667v341.333334H384v-341.333334h85.333333z m170.666667 128v213.333334h-85.333333v-213.333334h85.333333z m170.666667-85.333333v298.666667h-85.333334v-298.666667h85.333334z m-45.653334-361.6l55.936 63.445333-167.338666 143.573334-168.917334 91.392-132.138666-71.808-108.16 112.896-61.568-59.050667L336.085333 270.933333l148.693334 80.810667 113.024-61.141333 167.253333-140.202667z" fill="#8a8a8a" p-id="12722"></path></svg></i>
                    <span>工作经验-平均薪资折线图</span>
                  </div>
                  <div class="card-body">
                    <div id="LineChart" style="width: 100%;height: 400px"></div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      homeData: {
        jobTotal: null,
        companyTotal: null,
        maxSalaryCity: null,
        maxDegreePostion: null,
        maxExpPostion: null,
        maxSalaryPostion: null,
        jobPositionDistribution: [],
        jobExpSalary: {
          xData: {},
          yData: {}
        }
      },
      pageLoading:true
    }
  },
  methods: {
    initPieCharts(chartData) {
      let myChart = this.$echarts.init(document.getElementById('PieChart'));
      let option = {
        title: {
          text: '招聘行业分布饼状图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: '数量',
          left: 'right',
          type: 'scroll', // 设置为可滚动的图例
          orient: 'vertical', // 图例列表的布局朝向
          right: 10,
          top: 20,
          bottom: 20,
        },
        series: [
          {
            name: '行业招聘数量',
            type: 'pie',
            radius: '50%',
            data: chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    },
    initLineCharts(chartData) {
      var chartDoms = document.getElementById('LineChart');
      var myCharts = this.$echarts.init(chartDoms);
      var options;
      options = {
        title: {
          text: '工作经验-平均薪资折线图',
          subtext: '数据来自智联招聘爬虫',
          left: 'center'
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: 400
          }
        ],

        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: chartData.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: chartData.yData,
            type: 'line',
            areaStyle: {},
          }
        ]
      };

      options && myCharts.setOption(options);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  },
  watch: {
    'homeData.jobPositionDistribution'(newVal) {
      this.initPieCharts(newVal)
    },
    'homeData.jobExpSalary'(newVal) {
      console.log(newVal)
      this.initLineCharts(newVal)
    }
  },
  beforeMount() {
    this.$api.getHomeInfo().then(rep => {
      this.homeData = rep.data
    }).finally(
        ()=>{
          setTimeout(()=>{this.pageLoading=false},200)
        }
    )
  },
  mounted() {

  }
}
</script>

